<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘控制测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: white;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }
        .key-display {
            background: rgba(0,0,0,0.3);
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-size: 18px;
            min-height: 100px;
        }
        .instructions {
            background: rgba(0,255,0,0.2);
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .status {
            background: rgba(255,255,0,0.2);
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>键盘控制测试</h1>
        
        <div class="instructions">
            <h3>测试说明：</h3>
            <p>按下以下按键测试键盘事件是否正常工作：</p>
            <ul>
                <li>W/↑ - 前进</li>
                <li>S/↓ - 后退</li>
                <li>A/← - 左转</li>
                <li>D/→ - 右转</li>
                <li>Q - 上升</li>
                <li>E - 下降</li>
                <li>R - 重置</li>
            </ul>
        </div>
        
        <div class="status" id="status">
            状态：等待按键输入...
        </div>
        
        <div class="key-display" id="keyDisplay">
            按键记录将显示在这里...
        </div>
        
        <button onclick="toggleWalkMode()" id="walkModeBtn">激活漫游模式</button>
    </div>

    <script>
        let isWalkModeActive = false;
        let keyLog = [];
        
        function toggleWalkMode() {
            isWalkModeActive = !isWalkModeActive;
            const btn = document.getElementById('walkModeBtn');
            const status = document.getElementById('status');
            
            btn.textContent = isWalkModeActive ? '关闭漫游模式' : '激活漫游模式';
            btn.style.background = isWalkModeActive ? '#ff4444' : '#44ff44';
            status.textContent = `状态：漫游模式 ${isWalkModeActive ? '已激活' : '已关闭'}`;
            
            console.log('漫游模式切换:', isWalkModeActive);
        }
        
        function logKey(key, action) {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = `[${timestamp}] ${key} - ${action}`;
            keyLog.unshift(logEntry);
            
            // 保持最多10条记录
            if (keyLog.length > 10) {
                keyLog.pop();
            }
            
            const display = document.getElementById('keyDisplay');
            display.innerHTML = keyLog.join('<br>');
            
            console.log(logEntry);
        }
        
        document.addEventListener('keydown', function(event) {
            const key = event.key.toLowerCase();
            let action = '';
            
            // 检查漫游模式状态
            if (!isWalkModeActive) {
                logKey(key, '漫游模式未激活，忽略输入');
                return;
            }
            
            switch(key) {
                case 'w':
                case 'arrowup':
                    action = '前进';
                    break;
                case 's':
                case 'arrowdown':
                    action = '后退';
                    break;
                case 'a':
                case 'arrowleft':
                    action = '左转';
                    break;
                case 'd':
                case 'arrowright':
                    action = '右转';
                    break;
                case 'q':
                    action = '上升';
                    break;
                case 'e':
                    action = '下降';
                    break;
                case 'r':
                    action = '重置';
                    break;
                default:
                    action = '未知按键';
                    break;
            }
            
            if (action) {
                logKey(key, action);
                event.preventDefault(); // 阻止默认行为
            }
        });
        
        // 页面加载完成提示
        window.addEventListener('load', function() {
            console.log('键盘测试页面加载完成');
            console.log('请点击"激活漫游模式"按钮，然后测试键盘控制');
        });
    </script>
</body>
</html> 